<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            padding: 40px;
            border: 1px solid black;
            color: aliceblue;
            font-size: 30px;
        }
        
        .b1 {
            background-color: rgb(163, 144, 144);
        }
        
        .b2 {
            background-color: rgb(53, 60, 90);
        }
        
        .b3 {
            background-color: rgb(176, 224, 121);
        }
        
        .b4 {
            background-color: rgb(94, 117, 10);
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="b1 box">
        b1
        <div class="b2 box">
            b2
            <div class="b3 box">
                b3
                <div class="b4 box">
                    b4
                </div>
            </div>
        </div>
    </div>
    <script>
        var b1 = document.querySelector('.b1');
        var b2 = document.querySelector('.b2');
        var b3 = document.querySelector('.b3');
        var b4 = document.querySelector('.b4');

        b1.addEventListener('click', function(e) {
            console.log('事件被b1上的监听函数侦测到呢')
        }, false);
        b2.addEventListener('click', function(e) {
            console.log('事件被b2上的监听函数侦测到呢');
            //阻止冒泡
            e.stopPropagation()
                // e.stopImmediatePropagation()
        }, false);
        b1.addEventListener('contextmenu', function(e) {
            console.log('右键点击事件被b1监听到')
        })
        b2.addEventListener('contextmenu', function(e) {
                console.log('右键点击事件被b2监听到')
            })
            // b3.addEventListener('click', function() {
            //     console.log('点击b3')
            // }, false);
            // b4.addEventListener('click', function() {
            //     console.log('点击b4')
            // }, false);
    </script>
</body>

</html>